<template>
	<div id="addNew">
		<el-dialog
		  title="提示"
		  :visible.sync="addNewRole"
		  width="30%"
		  cente
		  :before-close="handleClose">
		  <el-form :model="roles" :rules="rules" ref="roles">
	    	<table>
	    		<tr>
	    			<td class="title">角色名称</td>
	    			<td class="content">
	    				<el-form-item prop="roleName">
	    					<el-input v-model="roles.roleName"></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">角色描述</td>
	    			<td class="content">
	    				<el-form-item prop="roleDesc">
	    					<el-input v-model="roles.roleDesc"></el-input>
	    				</el-form-item>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="title">使用权限</td>
	    			<td class="content">
	    				<el-tree
						  :data="allRolePermission"
						  show-checkbox
						  default-expand-all
						  node-key="permissionDesc"
						  ref="tree"
						  highlight-current
						  :props="defaultProps"
						  >
						  
						</el-tree>
	    			</td>
	    		</tr>
	    	</table>
	    	</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose()">取 消</el-button>
		    <el-button type="primary" @click="addNew()">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
  export default {
  	props:['addNewRole'],
    data() {
      return {
      		roles:{roleName:'',roleDesc:'',permissions:[]},
      		rules:{
      			roleName:[
		      		{required:true,message:"请输入内容",trigger:"blur"},
		      		{min:2,message:"字符长度不能小于2",trigger:"blur"}
      			],
      			roleDesc:[
      				{required:true,message:"请输入内容",trigger:"blur"},
		      		{min:4,message:"字符长度不能小于4",trigger:"blur"}
      			]
      			
      		},
		        defaultProps: {
		          children: 'children',
		          label: 'permissionDesc'

		        }
      }
    },
    mounted(){
			this.$store.dispatch('loadAllPermission');
		},
    computed:{
		allRolePermission(){
				var arr=[];
				var allRolePermission=this.$store.getters.allPermission;
				for(var key in allRolePermission){
					arr.push(allRolePermission[key]);
				}
				return arr;
			}
    },
    methods:{
    	handleClose(){
    		this.$parent.addNewRole=false;
    	},
    	addNew(){
    		var arr=[];
    			this.$refs.tree.getCheckedNodes().forEach((item)=>{
    				console.log(item);
    				arr.push(item._id);
    			})
    				this.roles.permissions=arr;
    			console.log(this.roles.permissions)
    			console.log(this.roles)
//  			bus.$emit('send',this.roles);
           			this.$refs['roles'].validate((valid)=>{
           			if(valid){
           				//将父级的id作为新增的父级id,父级id就是0
//	           				this.permissionInfo.parentid=this.parentid;
           				//提交
           				this.$http.post(this.$apis.addNewRole,this.roles)
           				.then((resp)=>{
//         					console.log(resp);
							
           				})
           				this.$parent.addNewRole=false;
           			}
           			else{
//	           				console.log('请正确输入内容');
           				return false;
           			}
           		})
       		
    	}
    }
  }
</script>
<style lang="scss" scoped>
	.title{
		width: 30%;
		text-align: center;
		line-height: 38px;
	
	}
	.content{
		width: 70%;
	}
</style>